<template>
  <div class="content-left">
    <div class="title">
      <p class="title-text">问题：{{question}}</p>
      <i class="title-icon"></i>
    </div>
    <ul class="data">
      <li class="data-text">{{ msgData }}</li>
    </ul>
    <el-button @click="test">发送数据</el-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        webSock: null,//创建 webscoket对象
        reconnectData: null,
        lockReconnect: false, //避免重复连接，因为onerror之后会立即触发 onclose
        timeout: 600000, //心跳时间参数  1小时一次心跳检测
        timeoutObj: null, //心跳检测函数执行后的参数 1代表执行成功
        serverTimeoutObj: null, //等待服务端响应函数执行后的参数 1代表执行成功
        textarea: '', //输入框 文字
        msgData: '', //ws接口推送的数据
        question: '',
      };
    },
    created() {
    },
    mounted() {

    },
    updated() {

    },
    methods: {
      test(){
        /*let data = {
          "knowledge_base_id":"byyl",
          "question":"你好,请问你是",
          "history":[]
        }*/
        let data = {
          knowledge_base_id:"byyl",
          question:"我饿了",
          history:[]
        }

        let unicodeQuestion = escape(data.question).replace(/\%u/g,'\\u');
        let calcUnicode = "";
        let unicodeArr = unicodeQuestion.split("\\u");
        for(let i=0;i<unicodeArr.length;i++){
           if(unicodeArr[i]){
             if(i==0)
               calcUnicode =  "\\u"  + unicodeArr[i].toLowerCase();
             else
             calcUnicode =  calcUnicode+ "\\u"  + unicodeArr[i].toLowerCase();
           }
        }

        let replaceChar = {"question": calcUnicode, "turn": 6, "flag": "start"}

        console.log(calcUnicode);
        // this.webSocketSend(data); //根据后台要求发送
        this.sendMsg(data,ev=>{
          console.log(ev.data)
          if(ev.data.indexOf("question") == -1){
            this.msgData += ev.data
          }
          if(ev.data.indexOf("question") !== -1){
            let d = JSON.parse(ev.data);
            console.log(d.question)
            this.question = d.question;
          }
        })
      }
    },
    destroyed() {
      /*this.lockReconnect = true;
      this.webSock.close(); //离开路由之后断开websocket连接
      clearTimeout(this.reconnectData); //离开清除 timeout
      clearTimeout(this.timeoutObj); //离开清除 timeout
      clearTimeout(this.serverTimeoutObj); //离开清除 timeout*/
    }
  };
</script>
<style>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: '';
  }
  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 480px;
  }
  /* 滚动条样式 */
  ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }

  ::-webkit-scrollbar-track-piece {
    background-color: rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 6px;
  }

  ::-webkit-scrollbar-thumb:vertical {
    height: 5px;
    background-color: rgba(125, 125, 125, 0.7);
    -webkit-border-radius: 6px;
  }

  ::-webkit-scrollbar-thumb:horizontal {
    width: 5px;
    background-color: rgba(125, 125, 125, 0.7);
    -webkit-border-radius: 6px;
  }
  .content-left {
    width: 375px;
    height: 625px;
    /*background: url(../../assets/metaverse/images/logo.png) no-repeat;*/
    background-size: 100% 100%;
    box-shadow: 0 0 40px 0 rgba(98, 103, 211, 0.3);
  }
  .title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin-left: 32px;
    line-height: 65px;
  }
  .title-text {
    letter-spacing: 5px;
    color: black;
    font-size: 20px;
  }
  .title-icon {
    display: block;
    width: 54px;
    height: 17px;
    /*background: url(../../assets/metaverse/images/logo.png) no-repeat;*/
    background-size: 100% 100%;
    margin-left: 12px;
  }
  .data {
    width: 86%;
    height: 535px;
    margin: auto;
    /*background: #383195;*/
    overflow: auto;
    list-style: none;
  }
  .data-text {
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    font-size: 14px;
    margin-top: 5px;
    color: black;
  }
</style>
